<template>
  <!-- 设置报关信息 -->
  <a-table
    class="table-two-line"
    ref="tableRef"
    row-key="num"
    :data="boxDetails"
    :span-method="spanMethodAll"
    :scroll="{
      y: 'calc(100vh - 360px)',
    }"
    :columns="tableColumns"
    :expandable="expandable"
    :default-expand-all-rows="true"
    size="mini"
    :bordered="false"
    :pagination="false"
  >
    <template #columns>
      <a-table-column v-for="(item, index) of tableColumns" :fixed="item.fixed" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
        <template v-if="item.dataIndex == 'img'" #cell="{ record }">
          <div class="order-w flex">
            <div class="order-detail-item" style="width: 200px">
              <p>
                <span class="label">箱号：</span>
                <span>{{ record.num }}</span>
              </p>
              <p>
                <span class="label">共计：</span>
                <span>{{ record.boxSkus.length }}SKU</span>
                <span style="margin-left: 20px">{{ record.boxNum }}件</span>
              </p>
            </div>
            <div class="order-detail-item" style="width: 400px">
              <p><span class="label">重量：</span>{{ record.weight }}KG（{{ record.weight2 }}磅）</p>
              <p><span class="label">箱规：</span>{{ record.length }}CM*{{ record.width }}CM*{{ record.height }}CM（{{ record.length2 }}in*{{ record.width2 }}in*{{ record.height2 }}in）</p>
            </div>
          </div>
        </template>
        <template v-if="['declareName', 'declareEnName', 'declareCurrency', 'declareAmount', 'declareNum', 'declareNo'].includes(item.dataIndex)" #title>
          <span class="warningColor">*</span>
          <span>{{ item.title }}</span>
        </template>
        <template v-else-if="item.dataIndex == 'declareWeight'" #title>
          <div class="flex-c">
            <span class="warningColor">*</span>
            <span>重量</span>
            <a-select v-model="weightUnit" size="mini" value-key="id" style="width: 60px; margin-left: 4px">
              <a-option value="g" label="g" />
              <a-option value="kg" label="kg" />
            </a-select>
          </div>
        </template>
      </a-table-column>
    </template>
    <template #expand-row="{ record }">
      <a-table class="table-singe-line" row-class="child-row" :show-header="false" row-key="id" :bordered="false" :data="record.boxSkus" size="mini" :pagination="false">
        <template #columns>
          <a-table-column :width="10" />
          <a-table-column v-for="(item, index) of tableColumns" :key="index" :fixed="item.fixed" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
            <template v-if="item.dataIndex == 'img'" #cell="option">
              <ImgPopover :src="option.record.productImg">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="option.record.productImg" />
                </template>
              </ImgPopover>
            </template>
            <template v-else-if="item.dataIndex == 'msku'" #cell="option">
              <TextLimit :rows="1">{{ option.record.msku || '--' }}</TextLimit>
              <TextLimit :rows="1">{{ option.record.asin || '--' }}</TextLimit>
            </template>
            <template v-else-if="item.dataIndex == 'sku'" #cell="option">
              <TextLimit :rows="1">{{ option.record.fnsku || '--' }}</TextLimit>
              <ShowSpuDetailBySku :val="option.record.sku" :showLimit="true" :rows="1" />
            </template>
          </a-table-column>
        </template>
      </a-table>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { ref, onMounted, PropType } from 'vue'
  onMounted(async () => {
    setDefaultData()
  })
  const props = defineProps({
    list: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
  const tableColumns: Array<any> = [
    {
      title: '图片',
      dataIndex: 'img',
      width: 60,
    },
    {
      title: 'MSKU/ASIN',
      dataIndex: 'msku',
      width: 100,
    },
    {
      title: 'FNSKU/SKU',
      dataIndex: 'sku',
      width: 100,
    },
    {
      title: '销售员',
      dataIndex: 'salesmanName',
      width: 140,
    },
    {
      title: '包装',
      dataIndex: 'packageName',
      width: 140,
    },
    {
      title: '包装SKU',
      dataIndex: 'packageSku',
      width: 120,
    },
    {
      title: '装箱数',
      dataIndex: 'inboxNum',
      width: 120,
    },
  ]
  const expandable = ref<any>({
    title: '',
    defaultExpandAllRows: true,
    expandedRowKeys: [],
    width: 10,
  })
  const boxDetails = ref<Array<any>>([])

  // 添加初始化数据
  async function setDefaultData() {
    boxDetails.value = JSON.parse(JSON.stringify(props.list))
    expandable.value.expandedRowKeys = boxDetails.value.map((el: any) => el.num)
  }
  // 合并单元格
  function spanMethodAll(option: any) {
    let { column } = option
    if (column.dataIndex === 'img') {
      return { rowspan: 1, colspan: 7 }
    }
  }
</script>
<style lang="less" scoped>
  :deep(.arco-table-td) {
    background-color: var(--color-fill-1);
  }
  :deep(.arco-table-tr-expand) {
    .arco-table-cell {
      padding: 0;
    }
    .arco-table {
      margin: 0 !important;
      .arco-table-td {
        border-bottom: 1px solid var(--color-neutral-3);
      }
    }
    background-color: #fff !important;
  }
  :deep(.child-row) {
    .arco-table-cell {
      padding: 2px 8px;
    }
  }
  :deep(.arco-table-tr-expand .arco-table-td) {
    background-color: #fff !important;
    border-bottom: none;
  }
  :deep(.arco-table-tr-expand tr:hover .arco-table-td) {
    background-color: var(--color-fill-1) !important;
  }
  :deep(.arco-table-expand .arco-table-cell) {
    display: none;
  }
  .order-w {
    color: #666;
    flex: 1;
    .order-detail-item {
      width: 200px;
    }
  }
</style>
